<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>NOP BOOK TEST</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="format-detection" content="telephone=no">
    <meta name="author" content="nop">
    <meta name="generator" content="wkhtmltopdf">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <script src="/js/polyfill.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/lodash.min.js"></script>
    <script src="/js/html2canvas.min.js"></script>
    <script src="/js/qrcode.min.js"></script>
    <script src="/js/helper.js"></script>
    <script src="/js/bookjs/1.2.0/bookjs-eazy.min.js"></script>
</head>
<body>
<style>
    canvas{
        display: block ;
    }
    .nop-page{
        background: #ffffff;
    }

    .qrcode img,.qrcode canvas{
        margin: 0 auto;
    }

    .line-dashed-1{
        border: 1px dashed black;
        margin: 1em 0;
        width: 100%;
    }

    .line-solid-1{
        border: 1px solid black;
        margin: 1em 0;
        width: 100%;
    }


</style>
<script>
    printQueue = Helper.queuePool();
    var printTicket = function(){
        var pages = $('.nop-page-content');
        var book = $('.nop-book');
        // book.css('zoom',1);
        var images =  new Array(pages.length);
        var imagesPromise =  pages.map(function(index,page){
            var el = $(page);
            var def = $.Deferred();
            html2canvas(el.get(0),{
                background : '#ffffff',
                onrendered: function(c) {
                    images[index] = c.toDataURL();
                    c = null;
                    def.resolve();
                    // book.css('zoom',0.65);
                }
            });
            return def;
        }).get();
        
        $.when.apply($,imagesPromise).then(function(){
            printQueue.queueWithDataItems(images,function (next, imageData, index) {
                Helper.postJson("http://localhost:8077/api/job/print-image-data-url",{image_data:imageData})
                    .error(function(){
                        alert("链接打印服务失败");
                    }).always(function () {
                        next()
                    });
            });
            
            printQueue.dequeue();
        });
    }

    var mmPx = 8;
    bookConfig = {
        //pageSize : "A4",
        pageSizeOption : {
            width : (58 * 8) + 'px',
            height : '0px', // 不限制高度
        },
        orientation : 'portrait',// landscape
        padding : "40px 40px 40px 40px",

        toolBar : {
            webPrint: false,
            saveHtml : false,
            buttons : [
                {
                    id : 'ticketPrint',
                    icon : '',
                    onClick : printTicket,
                }
            ]
        },
        //zoom : 0.65,
        start : false,
    };

    $(document).delegate('.nop-book','book.after-complete',function () {
        var book = $('.nop-book');
        // book.css('zoom',0.65);
    })
</script>
<script>
    $(function(){
        $(".qrcode").each(function(){
            var qrcode = new QRCode(this, {
                text: "https://www.zhouwuxue.com/",
                width: 128,
                height: 128,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
            });
        })
        

        bookConfig.start = true;
    })
</script>
<div id="content-box" style="display: none">
    <div data-op-type="block" style="font-size:30px;line-height:2em;text-align: center;">
        <img src="" />
        <div>NOP百货公司</div>
    </div>
    <div data-op-type="block" style="font-size: 30px;line-height: 2em"></div>
    <div data-op-type="block" style="font-size: 30px;line-height: 2em"></div>

    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：小炒肉丝1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：9.90</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：9.90</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：蛤蜊蒸蛋1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：1.00</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：15.00</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：三得利啤酒1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：10</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：15.00</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：150.00</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 2em; text-align: right">总计：174.90</div>

    <div data-op-type="block" class="qrcode"></div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div data-op-type="new-page"></div>
    <div data-op-type="block" style="font-size:30px;line-height:2em;text-align: center;">
        <img src="" />
        <div>NOP百货公司</div>
    </div>
    <div data-op-type="block" style="font-size: 30px;line-height: 2em"></div>
    <div data-op-type="block" style="font-size: 30px;line-height: 2em"></div>

    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：小炒肉丝2</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：9.90</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：9.90</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：蛤蜊蒸蛋2</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：1</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：1.00</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：15.00</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">商品名：三得利啤酒2</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">数量：10</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">单价：15.00</div>
    <div data-op-type="block" style="font-size: 20px;line-height: 1.5em">金额：150.00</div>
    <div data-op-type="block" class='line-dashed-1'></div>
    <div data-op-type="block" style="font-size: 20px;line-height: 2em; text-align: right">总计：174.90</div>

    <div data-op-type="block" class="qrcode"></div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>
</body>
</html>
